<template>

<div class="app-init home-index">
      <!-- 头部搜索 -->
  <header class="public-header">
      <!-- 搜索框 -->
      <form class="search-box clear">
          <!-- logo -->
          <div class="fl logo">
              <span class="iconfont icon-xiaomi"></span>
          </div>
          <!-- 搜索 -->
          <div class="input-box" @click="$router.openPage('/search')">
            <span class="iconfont icon-sousuo-copy absolute"></span>
            <input type="text" placeholder="搜索商品名称" readonly="readonly" class="input-controller">
          </div>
          <!-- 自己 -->
          <div class="my-center fr" @click="$router.openPage('/mine')">
            <span class="iconfont icon-smile"></span>
          </div>
      </form>
      <!-- 导航 -->
       <nav class="menu-box scroll-box-x noscroll">
        <ul class="wrap-box clear">
          <li class="item" :class="{ 'active' : index == navSelected }" v-for="(value, index) in navList" @click="navChange(index)" :key="index">
            <span>{{value}}</span>
          </li>
        </ul>
      </nav>
  </header>

  <div ref="view01" class="app-init scroll-box tab-box mi-tj footer-hack" v-show="navSelected==0">
        <img :src="bannerList[0]['src']" alt="图片替换文字" class="mi-swiper home-swiper">
        <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(v,i) in bannerList" :key="i" class="">
                <a href="">
                  <img :src="v.src" alt="图片加载失败">
                </a>
            </van-swipe-item>
        </van-swipe> -->

      <!-- 下面米粉卡那一列 -->
      <div class="nav-mi-tj clear">
        <a href="javascript:;" class="fl">
          <img @click="$router.openPage('/pay')" src="http://qiniu.verydog.cn//show.liluo.cc/2018011022292984819.png" alt="图片加载失败">
        </a>
        <a href="javascript:;" class="fl">
          <img @click="$router.openPage('/pay')" src="http://qiniu.verydog.cn//show.liluo.cc/2018011022292372054.png" alt="图片加载失败">
        </a>
        <a href="javascript:;" class="fl">
          <img @click="$router.openPage('/pay')" src="http://qiniu.verydog.cn//show.liluo.cc/2018011022291629252.png" alt="图片加载失败">
        </a>
        <a href="javascript:;" class="fl">
          <img @click="$router.openPage('/pay')" src="http://qiniu.verydog.cn//show.liluo.cc/2018011022290460400.png" alt="图片加载失败">
        </a>
      </div>

      <!-- 直降300 -->
      <div class="shop-item clear">
        <img @click="$router.openPage('/detail/1001')" src="http://qiniu.verydog.cn//show.liluo.cc/2018011114551289342.png" class="fl href" alt="图片加载失败">
        <img @click="$router.openPage('/detail/1004')" src="//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e2ad0dbf777fda097e55cea9ce716e33.jpg?thumb=1&w=358&h=252" class="fr href" style="margin-bottom: 0.05rem" alt="图片加载失败">
        <img @click="$router.openPage('/detail/1005')" src="http://qiniu.very dog.cn//show.liluo.cc/2018011114550596671.png" class="fr href" alt="图片加载失败">
      </div>


      <div class="shop-item clear">
        <img @click="$router.openPage('/detail/1003')"  src="http://qiniu.verydog.cn//show.liluo.cc/a589d24e74c4d96191dd46635054e804.jpg" alt="图片加载失败">
      </div>

      <div class="shop-item clear">
        <img @click="$router.openPage('/detail/1006')" src="http://qiniu.verydog.cn//show.liluo.cc/2018011115034174111.png" alt="图片加载失败">
      </div>

      <div class="shop-item clear">
        <img @click="$router.openPage('/detail/1007')" src="http://qiniu.verydog.cn//show.liluo.cc/2018011115033089933.png" alt="图片加载失败">
      </div>
     
     <!-- 最下面的小米感应灯? -->
     <!-- 去掉了懒加载 -->
      <div class="shop-item">
        <div class="shop-box clear">
          <div class="shop-box-item" v-for="(target, index) in shoplist" :key="index" @click="$router.openPage(target.href)">
            <img :src="target.src" alt="">
            <p class="title">{{ target.title }}</p>
            <p class="con">{{ target.con }}</p>
            <p class="money">
              <span class="small">￥</span> {{ target.money }}
            </p>
          </div>
        </div>
      </div>
  </div>

  <!-- cv工程师 -->
    <div ref="view02" class="app-init scroll-box tab-box footer-hack" v-show="navSelected == 1">
        <img :src="bannerList01[0]['src']" alt="图片替换文字" class="mi-swiper home-swiper">
      <!-- <swiper :list="bannerList01" class="home-swiper"></swiper> -->

      <div class="shop-item">
        <img src="http://qiniu.verydog.cn//show.liluo.cc/2018011316464243450.png" alt="">
        <div class="shop-box clear">
          <div class="shop-box-item" v-for="(target, index) in shoplist01" :key="index" @click="$router.openPage(target.href)">
            <img :src="target.src" alt="">
            <p class="title">{{ target.title }}</p>
            <p class="con">{{ target.con }}</p>
            <p class="money">
              <span class="small">￥</span> {{ target.money }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div ref="view03" class="app-init scroll-box tab-box footer-hack" v-show="navSelected == 2">
        <img :src="bannerList02[0]['src']" alt="图片替换文字" class="mi-swiper home-swiper">
      <!-- <swiper :list="bannerList02" class="home-swiper"></swiper> -->
      <div class="shop-item">
        <img src="http://qiniu.verydog.cn//show.liluo.cc/2018011316464243450.png" alt="">
        <div class="shop-box clear">
          <div class="shop-box-item" v-for="(target, index)  in shoplist02" :key="index" @click="$router.openPage(target.href)">
            <img :src="target.src" alt="">
            <p class="title">{{ target.title }}</p>
            <p class="con">{{ target.con }}</p>
            <p class="money">
              <span class="small">￥</span> {{ target.money }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div ref="view04" class="app-init scroll-box tab-box footer-hack" v-show="navSelected == 3">
        <img :src="bannerList03[0]['src']" alt="图片替换文字" class="mi-swiper home-swiper">
      <!-- <swiper :list="bannerList03" class="home-swiper"></swiper> -->
      <div class="shop-item">
        <img src="http://qiniu.verydog.cn//show.liluo.cc/2018011316464243450.png" alt="">
        <div class="shop-box clear">
          <div class="shop-box-item" v-for="(target, index)  in shoplist03" :key="index" @click="$router.openPage(target.href)">
            <img :src="target.src" alt="">
            <p class="title">{{ target.title }}</p>
            <p class="con">{{ target.con }}</p>
            <p class="money">
              <span class="small">￥</span> {{ target.money }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div ref="view05" class="app-init scroll-box tab-box footer-hack" v-show="navSelected == 4">
        <img :src="bannerList04[0]['src']" alt="图片替换文字" class="mi-swiper home-swiper">
      <!-- <swiper :list="bannerList04" class="home-swiper"></swiper> -->
      <div class="shop-item">
        <img src="http://qiniu.verydog.cn//show.liluo.cc/2018011316464243450.png" alt="">
        <div class="shop-box clear">
          <div class="shop-box-item" v-for="(target, index) in shoplist04" :key="index" @click="$router.openPage(target.href)">
            <img :src="target.src" alt="">
            <p class="title">{{ target.title }}</p>
            <p class="con">{{ target.con }}</p>
            <p class="money">
              <span class="small">￥</span> {{ target.money }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div ref="view06" class="app-init scroll-box tab-box footer-hack" v-show="navSelected == 5">
      <img :src="'http://qiniu.verydog.cn//show.liluo.cc/2018011317010732422.png'" @click="$router.openPage('/detail/1003')" alt="">
      <img :src="'http://qiniu.verydog.cn//show.liluo.cc/48ca6cfb19c45e7cbecbd8c34c757445.jpg'" alt="">
      <img :src="'http://qiniu.verydog.cn//show.liluo.cc/2018011317012799998.png'" alt="">
      <img :src="'http://qiniu.verydog.cn//show.liluo.cc/2018011317013522274.png'" alt="">
      <img :src="'http://qiniu.verydog.cn//show.liluo.cc/2018011317005752430.png'" alt="">
      <img :src="'http://qiniu.verydog.cn//show.liluo.cc/2018011317011947232.png'" alt="">
      <img :src="'http://qiniu.verydog.cn//show.liluo.cc/2018011317014434073.png'" alt="">
    </div>

    <div ref="view07" class="app-init scroll-box tab-box footer-hack" v-show="navSelected == 6">
        <img :src="bannerList06[0]['src']" alt="图片替换文字" class="mi-swiper home-swiper">
      <!-- <swiper :list="bannerList06" class="home-swiper"></swiper> -->
      <div class="shop-item">
        <img src="http://qiniu.verydog.cn//show.liluo.cc/2018011316464243450.png" alt="">
        <div class="shop-box clear">
          <div class="shop-box-item" v-for="(target, index) in shoplist06" :key="index" @click="$router.openPage(target.href)">
            <img :src="target.src" alt="">
            <p class="title">{{ target.title }}</p>
            <p class="con">{{ target.con }}</p>
            <p class="money">
              <span class="small">￥</span> {{ target.money }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div ref="view08" class="app-init scroll-box tab-box footer-hack" v-show="navSelected == 7">
        <img :src="bannerList07[0]['src']" alt="图片替换文字" class="mi-swiper home-swiper">
      <!-- <swiper :list="bannerList07" class="home-swiper"></swiper> -->
      <div class="shop-item">
        <img src="http://qiniu.verydog.cn//show.liluo.cc/2018011316464243450.png" alt="">
        <div class="shop-box clear">
          <div class="shop-box-item" v-for="(target, index) in shoplist07" :key="index" @click="$router.openPage(target.href)">
            <img :src="target.src" alt="">
            <p class="title">{{ target.title }}</p>
            <p class="con">{{ target.con }}</p>
            <p class="money">
              <span class="small">￥</span> {{ target.money }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div ref="view09" class="app-init scroll-box tab-box footer-hack" v-show="navSelected == 8">
      <img :src="'http://qiniu.verydog.cn//show.liluo.cc/2018011317154829739.png'" alt="">
      <img :src="'http://qiniu.verydog.cn//show.liluo.cc/2018011317155627636.png'" alt="">
      <img :src="'http://qiniu.verydog.cn//show.liluo.cc/2018011317160444789.png'" alt="">
      <img :src="'http://qiniu.verydog.cn//show.liluo.cc/2018011317161351928.png'" alt="">
    </div>
</div>
  
</template>
<script >
import StorageUtil from '../../utils/storage.js'
const storage = new StorageUtil()

export default {
components: {},
data() {
return {
  navList: ['推荐','手机','智能','电视', '电脑','全面屏','生活周边','盒子','艺术'],
  navSelected:0,
  bannerList : [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/01.png',
            href: '/detail/1001'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/02.jpg',
            href: '/detail/1002'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/03.jpg',
            href: '/detail/1003'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/04.jpg',
            href: '/detail/1004'
          }
        ],
  shoplist : [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/65eeeedca463345b0cfd36e042185af3.jpg',
            title: '米家感应灯',
            con: '举步之明，光明立现',
            money: 49,
            href: '/detail/1008'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/65eeeedca463345b0cfd36e042185af3.jpg',
            title: '米家感应灯',
            con: '举步之明，光明立现',
            money: 49,
            href: '/detail/1008'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/65eeeedca463345b0cfd36e042185af3.jpg',
            title: '米家感应灯',
            con: '举步之明，光明立现',
            money: 49,
            href: '/detail/1008'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/65eeeedca463345b0cfd36e042185af3.jpg',
            title: '米家感应灯',
            con: '举步之明，光明立现',
            money: 49,
            href: '/detail/1008'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/65eeeedca463345b0cfd36e042185af3.jpg',
            title: '米家感应灯',
            con: '举步之明，光明立现',
            money: 49,
            href: '/detail/1008'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/65eeeedca463345b0cfd36e042185af3.jpg',
            title: '米家感应灯',
            con: '举步之明，光明立现',
            money: 49,
            href: '/detail/1008'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/65eeeedca463345b0cfd36e042185af3.jpg',
            title: '米家感应灯',
            con: '举步之明，光明立现',
            money: 49,
            href: '/detail/1008'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/65eeeedca463345b0cfd36e042185af3.jpg',
            title: '米家感应灯',
            con: '举步之明，光明立现',
            money: 49,
            href: '/detail/1008'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/65eeeedca463345b0cfd36e042185af3.jpg',
            title: '米家感应灯',
            con: '举步之明，光明立现',
            money: 49,
            href: '/detail/1008'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/65eeeedca463345b0cfd36e042185af3.jpg',
            title: '米家感应灯',
            con: '举步之明，光明立现',
            money: 49,
            href: '/detail/1008'
          }
  ],

  //cv
  bannerList01 : [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/1888a9f0a6ae807113cb428b9e01f5fe.jpg',
            href: '/detail/1007'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011213275295675.png',
            href: '/detail/1009'
          }
        ],
  shoplist01: [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011213403719963.png',
            title: '红米Note 4X 32GB',
            con: '多彩金属 / 超长续航',
            money: 899,
            href: '/detail/1010'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011213403719963.png',
            title: '红米Note 4X 32GB',
            con: '多彩金属 / 超长续航',
            money: 899,
            href: '/detail/1010'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011213403719963.png',
            title: '红米Note 4X 32GB',
            con: '多彩金属 / 超长续航',
            money: 899,
            href: '/detail/1010'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011213403719963.png',
            title: '红米Note 4X 32GB',
            con: '多彩金属 / 超长续航',
            money: 899,
            href: '/detail/1010'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011213403719963.png',
            title: '红米Note 4X 32GB',
            con: '多彩金属 / 超长续航',
            money: 899,
            href: '/detail/1010'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011213403719963.png',
            title: '红米Note 4X 32GB',
            con: '多彩金属 / 超长续航',
            money: 899,
            href: '/detail/1010'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011213403719963.png',
            title: '红米Note 4X 32GB',
            con: '多彩金属 / 超长续航',
            money: 899,
            href: '/detail/1010'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011213403719963.png',
            title: '红米Note 4X 32GB',
            con: '多彩金属 / 超长续航',
            money: 899,
            href: '/detail/1010'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011213403719963.png',
            title: '红米Note 4X 32GB',
            con: '多彩金属 / 超长续航',
            money: 899,
            href: '/detail/1010'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011213403719963.png',
            title: '红米Note 4X 32GB',
            con: '多彩金属 / 超长续航',
            money: 899,
            href: '/detail/1010'
          }
        ],
  bannerList02 : [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011213533255816.png',
            href: '/detail/1011'
          }
        ],
  shoplist02: [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/93cc1fa15e0e9af87e37cba047d8186e.jpg',
            title: '米家四位四控插线板',
            con: '四位分控，随用随开',
            money: 89,
            href: '/detail/1012'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/93cc1fa15e0e9af87e37cba047d8186e.jpg',
            title: '米家四位四控插线板',
            con: '四位分控，随用随开',
            money: 89,
            href: '/detail/1012'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/93cc1fa15e0e9af87e37cba047d8186e.jpg',
            title: '米家四位四控插线板',
            con: '四位分控，随用随开',
            money: 89,
            href: '/detail/1012'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/93cc1fa15e0e9af87e37cba047d8186e.jpg',
            title: '米家四位四控插线板',
            con: '四位分控，随用随开',
            money: 89,
            href: '/detail/1012'
          }
        ],
  bannerList03: [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2bf70582edb45d83d7120a22c87200c9.jpg',
            href: '/detail/1013'
          }
        ],
  shoplist03: [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011316504878837.png',
            title: '小米电视4A 43英寸',
            con: '全高清 HDR，64位处理器',
            money: 1999,
            href: '/detail/1004'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011316504878837.png',
            title: '小米电视4A 43英寸',
            con: '全高清 HDR，64位处理器',
            money: 1999,
            href: '/detail/1004'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011316504878837.png',
            title: '小米电视4A 43英寸',
            con: '全高清 HDR，64位处理器',
            money: 1999,
            href: '/detail/1004'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011316504878837.png',
            title: '小米电视4A 43英寸',
            con: '全高清 HDR，64位处理器',
            money: 1999,
            href: '/detail/1004'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011316504878837.png',
            title: '小米电视4A 43英寸',
            con: '全高清 HDR，64位处理器',
            money: 1999,
            href: '/detail/1004'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011316504878837.png',
            title: '小米电视4A 43英寸',
            con: '全高清 HDR，64位处理器',
            money: 1999,
            href: '/detail/1004'
          }
        ],
  bannerList04: [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011316542272196.png',
            href: '/detail/1014'
          }
        ],
  shoplist04: [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/cf0b9ede4dbbc115f3d2d1b032e97d21.jpg',
            title: '13.3"笔记本i5 独显',
            con: '指纹解锁，全金属机身',
            money: 5199,
            href: '/detail/1014'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/cf0b9ede4dbbc115f3d2d1b032e97d21.jpg',
            title: '13.3"笔记本i5 独显',
            con: '指纹解锁，全金属机身',
            money: 5199,
            href: '/detail/1014'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/cf0b9ede4dbbc115f3d2d1b032e97d21.jpg',
            title: '13.3"笔记本i5 独显',
            con: '指纹解锁，全金属机身',
            money: 5199,
            href: '/detail/1014'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/cf0b9ede4dbbc115f3d2d1b032e97d21.jpg',
            title: '13.3"笔记本i5 独显',
            con: '指纹解锁，全金属机身',
            money: 5199,
            href: '/detail/1014'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/cf0b9ede4dbbc115f3d2d1b032e97d21.jpg',
            title: '13.3"笔记本i5 独显',
            con: '指纹解锁，全金属机身',
            money: 5199,
            href: '/detail/1014'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/cf0b9ede4dbbc115f3d2d1b032e97d21.jpg',
            title: '13.3"笔记本i5 独显',
            con: '指纹解锁，全金属机身',
            money: 5199,
            href: '/detail/1014'
          }
        ],
  bannerList06: [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011317083831934.png',
            href: '/detail/1015'
          }
        ],
  shoplist06: [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011317083193859.png',
            title: '8H护颈乳胶枕 Z2',
            con: '多重新科技  升级好睡眠',
            money: 239,
            href: '/detail/1016'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011317083193859.png',
            title: '8H护颈乳胶枕 Z2',
            con: '多重新科技  升级好睡眠',
            money: 239,
            href: '/detail/1016'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011317083193859.png',
            title: '8H护颈乳胶枕 Z2',
            con: '多重新科技  升级好睡眠',
            money: 239,
            href: '/detail/1016'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011317083193859.png',
            title: '8H护颈乳胶枕 Z2',
            con: '多重新科技  升级好睡眠',
            money: 239,
            href: '/detail/1016'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011317083193859.png',
            title: '8H护颈乳胶枕 Z2',
            con: '多重新科技  升级好睡眠',
            money: 239,
            href: '/detail/1016'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011317083193859.png',
            title: '8H护颈乳胶枕 Z2',
            con: '多重新科技  升级好睡眠',
            money: 239,
            href: '/detail/1015'
          }
        ],
  bannerList07: [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011317121511939.png',
            href: '/detail/1017'
          }
        ],
  shoplist07: [
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011317120865819.png',
            title: '小米影视会员卡',
            con: '畅享海量片库',
            money: 498,
            href: '/detail/1018'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011317120865819.png',
            title: '小米影视会员卡',
            con: '畅享海量片库',
            money: 498,
            href: '/detail/1018'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011317120865819.png',
            title: '小米影视会员卡',
            con: '畅享海量片库',
            money: 498,
            href: '/detail/1018'
          },
          {
            src: 'http://qiniu.verydog.cn//show.liluo.cc/2018011317120865819.png',
            title: '小米影视会员卡',
            con: '畅享海量片库',
            money: 498,
            href: '/detail/1018'
          }
        ]
}
},
computed: {},
watch: {},
methods: {
  navChange(index){
    
    this.navSelected = index
  }
},
created() {
},
mounted() {
  //每次路由选择了该组件以后会重新进行生命周期
  //?只会保存离开前最后点开的选项的滑动距离,其余的都是0
  //!可以改进

  this.navSelected = storage.getItem('home-index-nowIndex')||0
  //?????必须延时设置
  setTimeout(()=>{
    this.$refs.view01.scrollTop = storage.getItem('home-index-view01')||0
    this.$refs.view02.scrollTop = storage.getItem('home-index-view02')||0
    this.$refs.view03.scrollTop = storage.getItem('home-index-view03')|| 0
    this.$refs.view04.scrollTop = storage.getItem('home-index-view04')|| 0
    this.$refs.view05.scrollTop = storage.getItem('home-index-view05')|| 0
    this.$refs.view06.scrollTop = storage.getItem('home-index-view06')|| 0
    this.$refs.view07.scrollTop = storage.getItem('home-index-view07')|| 0
    this.$refs.view08.scrollTop = storage.getItem('home-index-view08')|| 0
    this.$refs.view09.scrollTop = storage.getItem('home-index-view09')|| 0
  },10)
  

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeUnmount() {}, //生命周期 - 销毁之前
unmounted() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发


beforeRouteLeave (to, from, next) {
  //设置滑动的高度
  storage.setItem('home-index-view01',this.$refs.view01.scrollTop)
  storage.setItem('home-index-view02',this.$refs.view02.scrollTop)
  storage.setItem('home-index-view03',this.$refs.view03.scrollTop)
  storage.setItem('home-index-view04',this.$refs.view04.scrollTop)
  storage.setItem('home-index-view05',this.$refs.view05.scrollTop)
  storage.setItem('home-index-view06',this.$refs.view06.scrollTop)
  storage.setItem('home-index-view07',this.$refs.view07.scrollTop)
  storage.setItem('home-index-view08',this.$refs.view08.scrollTop)
  storage.setItem('home-index-view09',this.$refs.view09.scrollTop)
  //设置选中的选项
  storage.setItem('home-index-nowIndex',this.navSelected)
  next()  
}
}
</script>
<style lang="sass">
@import '../../assets/sass/tmp/home-index'

.home-index .tab-box
  top: 2.5rem
  // .home-swiper 
  //   height: 5rem

.home-index .tab-box.mi-tj .nav-mi-tj a
    display: block
    width: 25%
.home-index .shop-box
    background-color: #fff

   
</style>